import React, { useState, useEffect, useCallback } from 'react'
import { useNavigate } from 'react-router-dom';
import { Toast, NavBar } from 'react-vant';
import { PullRefresh, List, Cell } from 'react-vant'
import { Tabs } from 'antd-mobile'
import axios from '../../utils/index'
import style from './index.module.css'
const Index: React.FC = () => {
    const navigate = useNavigate()
    const [tabList, setTabList] = useState([]);
    // const [tabIndex, setTabIndex] = useState(0);
    const aaa = async () => {
        const res = await axios.get('/api/neitab')
        if (res.data.code == 200) {
            setTabList(res.data.neitab)
            console.log(res.data.neitab);
        }
    }

    // const change = (index: number) => {
    //     setTabIndex(index);
    // };
    useEffect(() => {
        aaa()
    }, [])

    // const onLoad = useCallback(async () => {
    //     const res = await axios.get('/api/neitab');
    //     setTimeout(() => {
    //         if (res.data.code === 200) {
    //             setTabList([...tabList, ...res.data.tabList]);
    //         }
    //     }, 1000)
    // }, [tabList]);
    return (
        <div>
            <NavBar
                title="内科"
                onClickLeft={() => navigate(-1)}
            />
            <img src="../src/assets/110.png" alt="" style={{ width: '100%' }} />


            <Tabs defaultActiveKey='0'>
                {
                    tabList && tabList.map((item: any, index: number) => (
                        <Tabs.Tab title={item.title} key={index} >
                            {item.children.length > 0 && item.children.map((v, i) => (
                                <div key={i}>
                                    <div className={style.box20}>
                                        <div>
                                            <img src={v.img} alt="" style={{ width: '70px',height: '70px',borderRadius:'50%'}} />
                                        </div>
                                        <div className={style.box21}>
                                            <p><b>{v.name}</b>&nbsp; &nbsp;{v.zhu}</p>
                                            <p>{v.yuan}</p>
                                            <p>擅长:{v.shen}</p>
                                            <p>
                                                咨询： <span style={{ color: 'orange', fontSize: '14px' }}>{v.zi}人</span> 评分: <span style={{ color: 'orange', fontSize: '14px' }}>{v.ping}分</span>
                                                <button className={style.btn}>立即咨询</button>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </Tabs.Tab>
                    ))
                }
            </Tabs>
        </div>
    )
}

export default Index
